<template>
    <v-card flat v-if="talk">
        <v-list-item>
            <v-list-item-avatar tile size="40" class="mr-10px bd-radius5px">
                <!--        @click="toUserDetail(talk.user.id)"-->
                <v-img :src="$imgUrl+talk.user.headImg"/>
            </v-list-item-avatar>
            <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-bold">{{talk.user.nickname}}</v-list-item-title>
                <v-list-item-subtitle class="subtitle-2">{{talk.createTime | formatTime}}</v-list-item-subtitle>
                <!-- 右上角是举报的位置-->
            </v-list-item-content>
        </v-list-item>
        <v-card-text class="body-1 black--text py-0" @click="toTalkDetailVue">
            {{talk.content}}
        </v-card-text>
        <v-card-text v-if="talk.imgs.length" @click="toTalkDetailVue" class="py-3px-0">
            <v-layout>
                <span v-show="false">{{onlyOneImg = talk.imgs.length===1}}</span>
                <u-col v-for="(img,index) in talk.imgs.slice(0,3)" :cols="onlyOneImg?12:4" class="pa-1d5px">
                    <v-img :class="{'bd-l-radius5px':(index===0),'bd-r-radius5px':(index===Math.min(3,talk.imgs.length)-1)}"
                           :src="$getTalkSmallImgUrl(talk.user)+img.img"
                           :aspect-ratio="onlyOneImg?null:1"
                           max-height="200"
                           :max-width="Math.min(200*img.aspectRatio,230)"
                           :contain="onlyOneImg" position="left"/>
                </u-col>
            </v-layout>
        </v-card-text>
        <v-card-actions class="row-end pb-0">
            <v-btn text small @click="setTalk">
                <v-icon left>chat_bubble_outline</v-icon>
                {{talk.comments.length}}
            </v-btn>
        </v-card-actions>
        <v-card-text class="pa-0">
            <v-card v-if="talk.comments" flat>
                <v-card-text
                        v-for="comment in talk.comments.filter((comment,index)=>index<commentShowNum)"
                        class="pt-3px pb-0 black--text body-1">
                    <!--{{childComment.no}}#--> <a>{{comment.user.nickname}}：</a>
                    <span @click="setComment(talk,comment)">{{comment.content}}</span>
                    <child-comment :talk="talk" :comment="comment"></child-comment>
                </v-card-text>


                <v-card-actions
                        v-show="!showAllComment && (talk.comments.length>commentShowNum || showOtherCommentClicked)"
                        class="pb-0 pt-3px">
                    <v-btn text small color="orange" class="body-1" @click="toggleOtherComments">
                    <span v-show="talk.comments.length>commentShowNum">
                      查看其余{{talk.comments.length - commentShowNum}}条评论
                        <v-icon>expand_more</v-icon>
                    </span>
                        <span v-show="showOtherCommentClicked">
                      收起评论
                    <v-icon>expand_less</v-icon>
                    </span>
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-card-text>
        <v-divider class="mt-5px"></v-divider>
    </v-card>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch, Emit} from 'vue-property-decorator'
  import Talk from "@/model/Talk"
  import TalkAPI from "@/views/talk/TalkAPI"
  import {namespace} from "vuex-class"
  import ChildComment from "@/views/talk/item/ChildComment.vue"
  import RouterName from "@/const/RouterName"

  const talkModule = namespace('talk')

  @Component({
    components: {ChildComment}
  })
  export default class TalkItem extends Vue {
    @Prop() readonly talk: Talk
    @Prop({type: Boolean, default: false}) readonly showAllComment: boolean
    @talkModule.State('currentContent') currentContent: any
    @talkModule.State('inputContentFocus') inputContentFocus: any
    showOtherCommentClicked: boolean = false

    toggleOtherComments() {
      if (this.showOtherCommentClicked) {
        this.showOtherCommentClicked = false
      } else {
        this.showOtherCommentClicked = true
      }
    }

    get commentLimitNum() {
      if (this.showAllComment || this.showOtherCommentClicked) {
        return this.talk.comments.length
      } else {
        return 4
      }
    }

    get commentShowNum() {
      return this.talk.comments.length > this.commentLimitNum ? (this.commentLimitNum - 1) : this.commentLimitNum
    }

    toTalkDetailVue() {
      if (this.$route.name !== RouterName.talkDetail) {
        this.$routerTo(RouterName.talkDetail, {talkId: this.talk.id})
      }
    }

    setTalk() {
      this.scroll()
      this.$store.commit('talk/setTalk', this.talk)
    }

    setComment(talk, comment) {
      // this.promptDeleteContent()
      this.scroll()
      this.$store.commit('talk/setComment', {talk, comment})
    }

    @Emit()
    scroll() {
      return this.talk
    }

  }
</script>
